<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
            <div class="mask4"></div>
            <div class="mask5"></div>
          </div>
        </div>
        <div class="mockup">
          <div class="macbook">
            <svg
              class="shadows"
              width="579"
              height="126"
              viewBox="0 0 579 126"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g opacity="0.5" filter="url(#filter0_f_292_3430)">
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M566.661 8.18489L509.616 123.342C507.272 126.662 62.4703 126.66 60.1276 123.342L3.08243 8.18489C0.738523 4.86494 569.004 4.86662 566.661 8.18489Z"
                  fill="url(#paint0_linear_292_3430)"
                />
              </g>
              <g opacity="0.05" filter="url(#filter1_f_292_3430)">
                <rect
                  x="0.841797"
                  y="0.699463"
                  width="577.346"
                  height="40.7911"
                  rx="20.3956"
                  fill="black"
                />
              </g>
              <g opacity="0.5" filter="url(#filter2_f_292_3430)">
                <rect
                  x="16.0718"
                  y="0.924805"
                  width="551.502"
                  height="28.7983"
                  rx="14.3991"
                  fill="black"
                />
              </g>
              <defs>
                <filter
                  id="filter0_f_292_3430"
                  x="-53.9155"
                  y="-51.2951"
                  width="677.575"
                  height="234.117"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="BackgroundImageFix"
                    result="shape"
                  />
                  <feGaussianBlur
                    stdDeviation="28.4953"
                    result="effect1_foregroundBlur_292_3430"
                  />
                </filter>
                <filter
                  id="filter1_f_292_3430"
                  x="-17.9682"
                  y="-18.1105"
                  width="614.966"
                  height="78.4111"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="BackgroundImageFix"
                    result="shape"
                  />
                  <feGaussianBlur
                    stdDeviation="9.40498"
                    result="effect1_foregroundBlur_292_3430"
                  />
                </filter>
                <filter
                  id="filter2_f_292_3430"
                  x="-15.2782"
                  y="-30.4251"
                  width="614.201"
                  height="91.4981"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="BackgroundImageFix"
                    result="shape"
                  />
                  <feGaussianBlur
                    stdDeviation="15.675"
                    result="effect1_foregroundBlur_292_3430"
                  />
                </filter>
                <linearGradient
                  id="paint0_linear_292_3430"
                  x1="23.0571"
                  y1="14.2142"
                  x2="23.0571"
                  y2="125.831"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stop-opacity="0.5" />
                  <stop offset="0.658723" stop-opacity="0.05" />
                  <stop offset="1" stop-color="white" stop-opacity="0.01" />
                </linearGradient>
              </defs>
            </svg>

            <svg
              class="case"
              width="597"
              height="390"
              viewBox="0 0 597 390"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g filter="url(#filter0_di_292_3434)">
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M0.519531 18.1219C0.519531 8.18551 8.57459 0.130493 18.511 0.130493H578.683C588.619 0.130493 596.674 8.18555 596.674 18.122V371.085C596.674 381.021 588.619 389.076 578.683 389.076H18.511C8.57459 389.076 0.519531 381.021 0.519531 371.085V18.1219Z"
                  fill="white"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M0.519531 18.1219C0.519531 8.18551 8.57459 0.130493 18.511 0.130493H578.683C588.619 0.130493 596.674 8.18555 596.674 18.122V371.085C596.674 381.021 588.619 389.076 578.683 389.076H18.511C8.57459 389.076 0.519531 381.021 0.519531 371.085V18.1219Z"
                  stroke="#D3D8E0"
                />
              </g>
              <defs>
                <filter
                  id="filter0_di_292_3434"
                  x="-15.9805"
                  y="-9.36951"
                  width="629.155"
                  height="421.946"
                  filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB"
                >
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feColorMatrix
                    in="SourceAlpha"
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    result="hardAlpha"
                  />
                  <feOffset dy="7" />
                  <feGaussianBlur stdDeviation="8" />
                  <feColorMatrix
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
                  />
                  <feBlend
                    mode="normal"
                    in2="BackgroundImageFix"
                    result="effect1_dropShadow_292_3434"
                  />
                  <feBlend
                    mode="normal"
                    in="SourceGraphic"
                    in2="effect1_dropShadow_292_3434"
                    result="shape"
                  />
                  <feColorMatrix
                    in="SourceAlpha"
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    result="hardAlpha"
                  />
                  <feOffset dy="1" />
                  <feGaussianBlur stdDeviation="0.5" />
                  <feComposite
                    in2="hardAlpha"
                    operator="arithmetic"
                    k2="-1"
                    k3="1"
                  />
                  <feColorMatrix
                    type="matrix"
                    values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
                  />
                  <feBlend
                    mode="normal"
                    in2="shape"
                    result="effect2_innerShadow_292_3434"
                  />
                </filter>
              </defs>
            </svg>

            <div class="screen2">
              <div class="place-inside-the-group">
                <div class="mask6"></div>
                <div class="object">
                  <video muted="muted" class="mask6" src="@/assets/mp4/home.mp4" poster="false.png" autoplay="autoplay" controls="controls" loop="-1"></video>

                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="easy-way-to-create-b">
            Easy way to create <br />A Film
          </div>
          <div class="we-made-beautiful-an">
            <span
              ><span class="we-made-beautiful-an-span"
                >电影=高资金？<br />电影=高人力？<br />电影=高时间？<br />“</span
              ><span class="we-made-beautiful-an-span2">Filmaction</span
              ><span class="we-made-beautiful-an-span3"
                >”将为你提供优质的电影制作服务，无论你是短视频爱好者、还是专业的电影从业者，都可以在这里找到最简单的制作模式。</span
              ></span
            >
          </div>
          <div class="rectangle-copy-6"></div>
          <router-link to="/input_con" class="get-started">开始创作</router-link>
          <div class="video">
            <svg
              class="ic-play-button"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect
                opacity="0.1"
                width="24"
                height="24"
                rx="12"
                fill="#FF7318"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9 8.24824C9 7.47812 9.83395 6.99704 10.5006 7.38257L16.9883 11.1344C17.6542 11.5194 17.6542 12.4807 16.9883 12.8657L10.5006 16.6175C9.83395 17.0031 9 16.522 9 15.7519V8.24824Z"
                fill="#FF7318"
              />
            </svg>

            <div class="watch-video">预览样片</div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle2"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle3"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="#D2D5E7"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M14 4H18M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="#2E3035"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <svg
      class="ic-search"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"
        fill="white"
      />
    </svg>

    <div class="rectangle6"></div>
    <div class="home">Home</div>
    <div class="services2">Support</div>
    <div class="services3">Contact</div>
    <div class="services4">Priceing</div>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 800px;
  position: static;
}
.pateern {
  width: 505px;
  height: 800px;
  position: static;
}
.mask {
  width: 505px;
  height: 800px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 505px;
  height: 800px;
  position: absolute;
  left: 935px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 889px;
  height: 587px;
  position: absolute;
  left: 431.66px;
  top: 682.27px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1, 1);
}
.mask4 {
  border-radius: 130px;
  border-style: solid;
  border-color: #1f318e;
  border-width: 70px;
  opacity: 0.6000000238418579;
  width: 384px;
  height: 413.14px;
  position: absolute;
  left: 945.17px;
  top: 827.27px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1, 1);
}
.mask5 {
  border-radius: 130px;
  border-style: solid;
  border-color: #000000;
  border-width: 80px;
  opacity: 0.1540411114692688;
  width: 362px;
  height: 410.48px;
  position: absolute;
  left: 578.89px;
  top: 223.1px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1, 1);
}
.mockup {
  width: 596.15px;
  height: 488.7px;
  position: static;
}
.macbook {
  width: 596.15px;
  height: 488.7px;
  position: static;
}
.shadows {
  position: absolute;
  left: 747.84px;
  top: 543.7px;
  overflow: visible;
}
.case {
  position: absolute;
  left: 736.52px;
  top: 180.13px;
  overflow: visible;
}
.screen2 {
  width: 553.58px;
  height: 348.3px;
  position: static;
}
.place-inside-the-group {
  width: 553.58px;
  height: 348.3px;
  position: static;
}
.mask6 {
  background: #f2f7fb;
  width: 553.58px;
  height: 348.3px;
  position: absolute;
  left: 758px;
  top: 200.03px;
}
.object {
  width: 553.58px;
  height: 348.3px;
  position: static;
}
.shape {
  position: absolute;
  left: 1023px;
  top: 362.03px;
  overflow: visible;
}
.content {
  width: 470px;
  height: 321px;
  position: absolute;
  left: 135px;
  top: 200px;
  overflow: hidden;
}
.easy-way-to-create-b {
  color: #212b36;
  text-align: left;
  font: 600 48px "Montserrat", sans-serif;
  position: absolute;
  left: 0px;
  top: calc(50% - 160.5px);
  width: 482px;
}
.we-made-beautiful-an {
  text-align: left;
  font: 400 10px/22px "Open Sans", sans-serif;
  position: absolute;
  left: 0px;
  top: calc(50% - 28.5px);
  width: 470px;
}
.we-made-beautiful-an-span {
  color: #637381;
  font: 400 10px/22px "Open Sans", sans-serif;
}
.we-made-beautiful-an-span2 {
  color: #3056d3;
  font: 400 10px/22px "Open Sans", sans-serif;
}
.we-made-beautiful-an-span3 {
  color: #637381;
  font: 400 10px/22px "Open Sans", sans-serif;
}
.rectangle-copy-6 {
  background: linear-gradient(to left, #3056d3, #3056d3);
  border-radius: 6px;
  width: 158px;
  height: 48px;
  position: absolute;
  left: 0px;
  top: 273px;
}
.get-started {
  color: #ffffff;
  text-align: left;
  font: 700 16px/24px "Lato", sans-serif;
  position: absolute;
  left: calc(50% - 189px);
  top: calc(50% - -123.5px);
}
.video {
  width: 140px;
  height: 24px;
  position: absolute;
  left: 213px;
  top: 285px;
  overflow: hidden;
}
.ic-play-button {
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: visible;
}
.watch-video {
  color: #ff7318;
  text-align: left;
  font: 700 16px "Lato", sans-serif;
  position: absolute;
  left: 37px;
  top: calc(50% - 9px);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle2 {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #151828;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 135px;
  top: calc(50% - 14px);
}
.button-let-talk {
  width: 160px;
  height: 54px;
  position: absolute;
  left: 1045px;
  top: 13px;
  overflow: hidden;
}
.rectangle3 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 160px;
  height: 54px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 51px;
  top: 18px;
}
.menu {
  position: absolute;
  left: 1265px;
  top: 20px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 32px;
  overflow: visible;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 44px;
  overflow: visible;
}
.rectangle6 {
  width: 1440px;
  height: 100px;
  position: absolute;
  left: -735px;
  top: 647px;
}
.home {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 131px;
  top: 678px;
}
.services2 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 306px;
  top: 678px;
}
.services3 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 403px;
  top: 678px;
}
.services4 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 214px;
  top: 678px;
}
</style>
